$setting: (
    version: "1.0.0",
    //{Boolean} 是否开启厂商前缀
    is-verdor-prefix: true,
    //厂商前缀
    vendor-prefix: -webkit-
);
$flex: (
    // {String} 定义是水平布局还是垂直布局: row | column
    direction: column
);

@mixin _prefix($property, $value) {
    @if map-get($setting, is-verdor-prefix){
        //遍历输出厂商代码
        @each $vendor in map-get($setting, vendor-prefix) {
            #{$vendor}#{$property}: $value;
        }
    }
    //现代浏览器
    #{$property}: $value;
}

@mixin overflow($overflow: auto){
    @if $overflow == auto {
        overflow: auto;
        //移除，防止IOS webview崩溃
        //-webview-overflow-scrolling: touch;
    } @else {
        overflow: $overflow;
    }
}

@mixin fullscreen ($z-index: null, $position: absolute) {
    position: $position;
    z-index: $z-index;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

@mixin flexbox($flexbox: flex){
    @if $flexbox == inline-flex or $flexbox == inline {
        $flexbox: "inline-";
    } @else {
        $flexbox: "";
    }

    //老式浏览器（实验性质支持3个阶段草案）
    //原始草案： 2009
    //过度草案: 2011
    //最新草案: 2012
    @if map-get($setting, is-verdor-prefix){
        @each $vendor in map-get($setting, vendor-prefix){
            @if $vendor != -ms- {
                display: #{$vendor}#{$flexbox}box;
                display: #{$vendor}#{$flexbox}flex;
            } @else {
                display: #{$vendor}#{$flexbox}flexbox;
            }
        }
    }
    //现代浏览器
    display: #{$flexbox}flex;
}

@mixin flex($flex:1, $direction: row){
    @if map-get($setting, is-verdor-prefix){
        @each $vendor in map-get($setting, vendor-prefix){
            @if $vendor != -ms- {
                #{$vendor}box-flex: $flex;
                #{$vendor}flex: $flex;
            } @flex {
                //当厂商前缀为‘-ms-’时输出过度草案厂商前缀
                #{$vendor}flex: $flex;
            }
        }
    }
    //现代浏览器
    flex: $flex;

    //修复android browser 4.3及以下
    //，IOS safari6.1及以下按比例分配错误问题
    @if $direction == row {
        width: .1px;
    }
}


@mixin order($order: 1){
    @if map-get($setting, is-verdor-prefix){
        @each $vendor in map-get($setting, vendor-prefix) {
            @if $vendor != -ms- {
                #{$vendor}box-ordinal-group: $order;
                #{$vendor}order: $order;
            } @else {
                #{$vendor}flex-order: $order;
            }
        }
    }
    //现代浏览器
    order: $order;
}

@mixin flex-direction ($flex-direction: row) {
    @if $flex-direction == row {
        @if map-get($setting, is-verdor-prefix) {
            @each $vendor in map-get($setting, vendor-prefix) {
                @if $vendor != -ms- {
                    #{$vendor}box-orient: horizontal;
                    #{$vendor}box-direction: normal;
                }
            }
        }
    } @else if $flex-direction == column {
        @if map-get($setting, is-verdor-prefix) {
            @each $vendor in map-get($setting, vendor-prefix) {
                @if $vendor != -ms- {
                    #{$vendor}box-orient: vertical;
                    #{$vendor}box-direction: normal;
                }
            }
        }
    } @else if $flex-direction == row-reverse {
        @if map-get($setting, is-verdor-prefix) {
            @each $vendor in map-get($setting, vendor-prefix) {
                @if $vendor != -ms- {
                    #{$vendor}box-orient: horizontal;
                    #{$vendor}box-direction: reverse;
                }
            }
        }
    } @else if $flex-direction == column-reverse {
        @if map-get($setting, is-verdor-prefix) {
            @each $vendor in map-get($setting, vendor-prefix) {
                @if $vendor != -ms- {
                    #{$vendor}box-orient: vertical;
                    #{$vendor}box-direction: reverse;
                }
            }
        }
    }
    //老式浏览器
    @if map-get($setting, is-verdor-prefix) {
        @each $vendor in map-get($setting, vendor-prefix) {
            #{$vendor}flex-direction: $flex-direction;
        }
    }
    //现代浏览器
    flex-direction: $flex-direction;
}

@mixin flex-wrap($flex-wrap: nowrap) {
    @include _prefix(flex-wrap, $flex-wrap);
}


@mixin justify-content($justify-content: center){
    @if $justify-content == center {
        @if map-get($setting, is-verdor-prefix) {
            @each $vendor in map-get($setting, vendor-prefix) {
                @if $vendor != -ms- {
                    #{$vendor}box-pack: $justify-content;
                    #{$vendor}justify-content: $justify-content;
                } @else {
                    #{$vendor}flex-pack: $justify-content;
                }
            }
        } @else if $justify-content == flex-start {
            @if map-get($setting, is-verdor-prefix) {
                @each $vendor in map-get($setting, vendor-prefix) {
                    @if $vendor != -ms- {
                        #{$vendor}box-pack: start;
                        #{$vendor}justify-content: $justify-content;
                    } @else {
                        #{$vendor}flex-pack: start;
                    }
                }
            }
        } @else if $justify-content == flex-end {
            @if map-get($setting, is-verdor-prefix) {
                @each $vendor in map-get($setting, vendor-prefix) {
                    @if $vendor != -ms- {
                        #{$vendor}box-pack: end;
                        #{$vendor}justify-content: $justify-content;
                    } @else {
                        #{$vendor}flex-pack: end;
                    }
                }
            }
        }@else if $justify-content == space-between{
            @if map-get($setting, is-verdor-prefix) {
                @each $vendor in map-get($setting, vendor-prefix) {
                    @if $vendor != -ms- {
                        #{$vendor}box-pack: justify;
                        #{$vendor}justify-content: $justify-content;
                    } @else {
                        #{$vendor}flex-pack: justify;
                    }
                }
            }
        }@else if $justify-content == space-around{
            @if map-get($setting, is-verdor-prefix) {
                @each $vendor in map-get($setting, vendor-prefix) {
                    @if $vendor != -ms- {
                        #{$vendor}justify-content: $justify-content;
                    } @else {
                        #{$vendor}flex-pack: distribute;
                    }
                }
            }
        }
    }
    //现代浏览器
    justify-content: $justify-content;
}


@mixin align-items($align-items: center){
    @if $align-items == flex-start {
        @if map-get($setting, is-verdor-prefix) {
            @each $vendor in map-get(setting, vendor-prefix) {
                @if $vendor != -ms- {
                    #{$vendor}box-align: start;
                    #{$vendor}align-items: $align-items;
                } @else {
                    #{$vendor}flex-align: start
                }
            }
        }
    } @else if $align-items == flex-end {
        @if map-get($setting, is-verdor-prefix) {
            @each $vendor in map-get(setting, vendor-prefix) {
                @if $vendor != -ms- {
                    #{$vendor}box-align: end;
                    #{$vendor}align-items: $align-items;
                } @else {
                    #{$vendor}flex-align: end
                }
            }
        }
    } @else {
        //取值为center| baseline | stretch,3个阶段草案均相同
        @if map-get($setting, is-verdor-prefix) {
            @each $vendor in map-get($setting, vendor-prefix) {
                @if $vendor != -ms- {
                    #{$vendor}box-align: $align-items;
                    #{$vendor}align-items: $align-item;
                } @else {
                    #{$vendor}flex-align: $align-items;
                }

            }
        }
    }
    //现代浏览器
    align-items: $ailgn-items;
}

@mixin align-self($align-self: center){
    @if $align-self == flex-start {
        @each $vendor in map-get($setting, vendor-prefix) {
            @if $vendor != -ms- {
                #{$vendor}align-self: $align-self;
            } @else {
                #{$vendor}flex-item-align: start;
            }
        }
    }@else if $align-self == flex-end {
        @each $vendor in map-get($setting, vendor-prefix) {
            @if $vendor != -ms- {
                #{$vendor}align-self: $align-self;
            } @else {
                #{$vendor}flex-item-align: end;
            }
        }
    } @else {
        @if map-get($setting, is-verdor-prefix) {
            @each $vendor in map-get($setting, vendor-prefix) {
                @if $vendor != -ms- {
                    #{$vendor}align-self: $align-self;
                } @else {
                    #{$vendor}flex-item-align: $align-self;
                }
            }
        }
    }
    //现代浏览器
    align-self: $align-self;
}


//定义弹性布局
@mixin _flex{
    height: 100%;
    &,
    .flex-inherit {
        @include flexbox;
        @include flex-direction(map-get($flex, direction));
        overflow: hidden;
    }

    > .flex,
    .flex-inherit,
    .flex-inherit > .flex {
        @include flex(1, map-get($flex, direction));
        position: relative;
    }

    > .flex,
    .flex-inherit > .flex {
        @include overflow;
        //用于解决flex无法将动态高度继承给子元素
        //这里单独处理flex的子元素为yo-flex的情况
        //yo-flex通过绝对定位来拉伸得到高度
        //通过使用flex-inherit的方式来进行嵌套
        > .yo-flex {
            @include fullscreen;
        }
    }
}

.yo-flex {
    @include _flex;
}
